<template>
  <div class="div-one">
    <div class="div-two">
      <el-row :gutter="20">
        <el-col :span="5"
          ><el-input placeholder="根据用户名搜索" v-model="queryObj.username"></el-input
        ></el-col>
        <el-col :span="16"
          ><el-button @click="trim">清空</el-button><el-button type="primary" @click="search">搜索</el-button>
        </el-col>

        <el-col :span="2"
          ><el-button type="success" icon="el-icon-edit"  @click="addUser"
            >新增用户</el-button
          ></el-col
        >
      </el-row>
    </div>
    <div class="div-res">
      <i class="el-icon-info">共{{total}}条记录</i>
    </div>
    <!-- 表格部分 -->
    <div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="序号" width="180" align="center">
        </el-table-column>
        <el-table-column prop="email" label="邮箱" width="180" align="center">
        </el-table-column>
        <el-table-column prop="phone" label="联系电话" width="180" align="center">
        </el-table-column>
        <el-table-column prop="username" label="用户名" width="180" align="center">
        </el-table-column>
        <el-table-column prop="avatar" label="权限组名称" width="180" align="center">
        </el-table-column>
        <el-table-column prop="role" label="角色" width="180" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{ row }">
          <el-row>
            <el-button type="primary" icon="el-icon-edit" circle plain @click="edit(row.id)"></el-button>

            <el-button type="danger" icon="el-icon-delete" circle plain @click="del(row.id)"></el-button>
          </el-row>
           </template>
        </el-table-column>
      </el-table>
      <div class="div-button">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryObj.page"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="queryObj.pagesize"
          layout="prev, pager, next, sizes, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 弹窗 -->
    <UserAdd ref="user" :formBase="formBase" :text="text" :pageTitle="pageTitle"
     :PermissionGroupsList="PermissionGroupsList"
     :ruleInline="ruleInline" @newDataes="newDataes" @handleCloseModal="handleCloseModal"
     ></UserAdd>
  </div>
</template>

<script>
import UserAdd from '@/module-manage/components/user-add.vue'
import { list, remove, detail } from '@/api/base/users.js'
import { simple } from '@/api/base/permissions.js'
export default {
  data () {
    return {
      tableData: [],
      formBase: {
        username: '',
        email: '',
        password: '',
        role: '',
        permission_group_id: '',
        phone: '',
        introduction: '',
        id: null
      },
      queryObj: {
        page: 1,
        pagesize: 10,
        username: ''
      },
      total: 0,
      PermissionGroupsList: [],
      ruleInline: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' }
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        permission_group_id: [{ required: true, message: '请选择权限组', trigger: 'blur' }]
      },
      text: '',
      pageTitle: ''
    }
  },
  components: {
    UserAdd
  },
  created () {
    this.dataInfo()
  },

  methods: {
    // 渲染主页面
    async dataInfo () {
      const { data } = await list(this.queryObj)
      // console.log(data)
      this.tableData = data.list
      this.total = data.counts
      // this.formBase = data
    },
    // 分页
    handleSizeChange (val) {
      this.queryObj.pagesize = val
      this.queryObj.page = 1
      this.dataInfo()
    },
    // 每页多少条
    handleCurrentChange (val) {
      this.queryObj.page = val
      this.dataInfo()
    },
    // 删除功能
    async del (id) {
      // console.log(id)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        remove({ id })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.dataInfo()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 清空
    trim () {
      this.queryObj.username = ''
      this.dataInfo()
    },
    // 搜索
    async search () {
      // if (!this.username) return
      // this.tableData = this.tableData.filter(item => item.username === this.username)
      // this.dataInfo()
      const username = this.queryObj.username
      const { data } = await list({ username })
      this.tableData = data.list
    },
    // 超级管理员的权限
    async getPermission () {
      const { data } = await simple()
      // console.log(data)
      this.PermissionGroupsList = data
    },
    // 添加后弹窗
    addUser () {
      this.getPermission()
      this.text = '创建'
      this.pageTitle = '用户'
      this.$refs.user.dialogFormV()
    },

    // 关闭弹窗
    handleCloseModal () {
      this.$refs.user.dialogFormH()
      this.$refs.user.fn()
    },
    newDataes (formBase) {
      this.queryObj.page = 1
      this.queryObj.pagesize = 10
      this.handleCloseModal()
      this.dataInfo()
    },
    // 编辑
    async edit (id) {
      this.formBase.id = id
      this.text = '编辑'
      this.pageTitle = '用户'
      this.getPermission()
      const { data } = await detail(this.formBase)
      // console.log(data)
      this.formBase.username = data.username
      this.formBase.password = data.password
      this.formBase.email = data.email
      this.formBase.role = data.role
      this.formBase.permission_group_id = data.permission_group_id
      this.formBase.phone = data.phone
      this.formBase.introduction = data.introduction
      this.$refs.user.dialogFormV()
    }

  },

  computed: {

  }
}
</script>

<style scoped lang="less">
.div-one {
  padding: 20px;
  .div-two {
    padding: 20px;
    background-color: #fff;
  }
  .div-res {
    padding: 20px;
  }
  .div-button {
    background-color: #fff;
    padding: 20px 0;
    padding-left: 600px;
  }
}
</style>
